<template>
    <div class="clearfix">
        <a-upload list-type="picture-card" :file-list="imgList" name="files" @preview="handlePreview"
            :customRequest="upload" :remove="remove">
            <div v-if="imgList?.length < uploadLength && !onlyShow">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
            </div>
        </a-upload>
        <a-modal width="1200px" :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%;" :src="previewImage" />
        </a-modal>
    </div>
</template>

<script>
import nextApi from '@/api/nextApi'
export default {
    name: "upload",
    props: ['uploadLength', 'onlyShow', 'defImgList'],

    data() {
        return {
            imgList: [],
            previewVisible: false,
            previewImage: '',
        }
    },
    mounted() {
        this.validDefImgList()
    },

    methods: {
        getBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            });
        },
        handleCancel() {
            this.previewVisible = false;
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await this.getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        remove(file) {
            this.imgList.forEach((item, i) => {
                if (item.uid === file.uid) {
                    this.imgList.splice(i, 1)
                }
            })
            this.$emit('uploadChange', this.imgList)
        },
        upload({ file }) {
            let formData = new FormData()
            formData.append('file', file)
            nextApi.uploadImage(formData).then(res => {
                this.imgList.push({
                    uid: file.uid,
                    url: res.msg,
                    name: file.name,
                    status: 'done',
                    percent: 100,
                })
                this.$emit('uploadChange', this.imgList)
            })
        },
        validDefImgList() {
            console.log('defImgList', this.defImgList)
            if (this.defImgList.length > 0 && !this.defImgList.every(item => item)) {
                return
            }
            if (this.defImgList) {
                const time = new Date().getTime()
                this.imgList = this.defImgList.map((item, idx) => {
                    return {
                        uid: time + '_' + idx,
                        name: time + '_' + idx,
                        status: 'done',
                        percent: 100,
                        url: item,
                    }
                })
            }
        }
    },
}
</script>

<style scoped lang="scss"></style>
